<template>
    <view style="height: 100%">
        <ul class="db">
            <li class="df ac sb h48 bbf1">
                <p class="f14 c28">物流名称</p>
                <ul class="df ac">
                    <van-radio-group :value="radio" @change="onChange">
                        <view class="df ac">
                            <van-radio name="1" icon-size="18px"><span class="f14 c6">退货及退款</span></van-radio>
                            <van-radio name="2" icon-size="18px" class="ml20"><span class="f14 c6">仅退款</span></van-radio>
                        </view>
                    </van-radio-group>
                </ul>
            </li>
            <li class="df ac sb h48 bbf1" v-if="radio == 1">
                <p class="f14 c28">物流名称</p>
                <input class="f1 tr f14 c3" @input="onInput" :data-type="0" :value="express" placeholder="请填写物流名称" placeholder-class="cc" />
            </li>
            <li class="df ac sb h48 bbf1" v-if="radio == 1">
                <p class="f14 c28">运单编号</p>
                <input class="f1 tr f14 c3" @input="onInput" :data-type="1" :value="express_no" placeholder="请填写运单编号" placeholder-class="cc" />
            </li>

            <li class="db pd100 bbf1">
                <textarea class="f14 c3 w100 h110" @input="onInput" :data-type="2" :value="content" placeholder="请填写退货备注" placeholder-class="cc"></textarea>
            </li>
        </ul>

        <view class="mt30">
            <button class="sub" @tap="onSubmit">保存</button>
        </view>
    </view>
</template>

<script>
const http = require('../../utils/http');
export default {
    data() {
        return {
            ids: '',
            id: '',
            express: '',
            express_no: '',
            radio: '1',
            content: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        console.log(options.ids, options.id);
        this.setData({
            ids: options.ids,
            id: options.id
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        onChange(event) {
            this.setData({
                radio: event.detail
            });
        },

        onInput(e) {
            let type = e.currentTarget.dataset.type;
            let val = e.detail.value;
            switch (type) {
                case 0:
                    this.setData({
                        express: val
                    });
                    break;
                case 1:
                    this.setData({
                        express_no: val
                    });
                    break;
                case 2:
                    this.setData({
                        content: val
                    });
                    break;
            }
        },

        onSubmit() {
            console.log(123);
            let data = {
                order_id: this.id,
                order_goods_ids: this.ids,
                express: this.express,
                express_no: this.express_no,
                remarks: this.content,
                type: this.radio
            };
            http.request('order/orderRefund', data)
                .then((res) => {
                    uni.showToast({
                        title: res.message
                    });
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 1500);
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                });
        }
    }
};
</script>
<style>
@import './logistics.css';
</style>
